<template>
  <div class="city-select-box">
    <div class="city-select-item" v-for="(item, index) in cityData" :key="index">
      <div class="item-box">
        <div class="item-title">{{item.title}}</div>
        <div class="container-box" v-if="item.style !== 'inline'">
          <div class="item-name" v-for="(data, i) in item.items" :key="i">{{data.city_name}}</div>
        </div>
        <div v-else class="container-box display-box">
          <div class="item-btn" v-for="(d, t) in item.items" :key="t">{{d.city_name}}</div>
        </div>
      </div>
    </div>
    <div class="city-nav" @touchmove="handelTouchmove">
      <div v-for="(item, index) in cityData" :key="index" @click="navClick">{{item.style === 'inline' ? item.index : item.title}}</div>
    </div>
  </div>
</template>

<script>
import city from '../../utils/city'
export default {
  data() {
    return {
      cityData: [],
      currentCity: ''
    };
  },
  onLoad(options) {
    console.log(options);
    this.currentCity = options.userPosition
    this.getCityData()
  },
  mounted() {},
  methods: {
    // 处理城市数据
    getCityData() {
      let map = {}
      city.forEach((item) => {
        let key = item.city_pre.toUpperCase();
        if (!map[key]) {
          map[key] = {
            title: key,
            items: []
          }
        }
        map[key].items.push(item)
      })
      for(let [index, value] of Object.entries(map)) {
        this.cityData.push(value)
      }
      // 按照字母排序
      this.cityData.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
      // 创建热门城市
      const hot = {
        title: '热门城市',
        index: '热门',
        style: 'inline',
        items: city.slice(0, 10)
      };
      this.cityData.unshift(hot)
      // 创建当前定位城市
      const current = {
        title: '当前定位城市',
        index: '定位',
        style: 'inline',
        items: [{city_name: this.currentCity}]
      };
      console.log(this.currentCity);
      this.cityData.unshift(current)
      console.log(this.cityData, 111);
    },
    // 右侧导航栏的点击事件
    navClick (e) {
      console.log(e);
    },
    // 触摸滑动事件
    handelTouchmove () {
      console.log(11111111111);
    }
  },
};
</script>

<style scoped lang="less">
.city-select-box {
  position: relative;
  background: #f5f5f5;
  font-size: 28rpx;
  .city-select-item {
    .item-box {
      .item-title {
        background: rgb(235, 235, 235);
        padding: 10rpx 30rpx;
        font-weight: 500;
      }
      .container-box {
        padding: 30rpx;
        padding-right: 60rpx;
        .item-name {
          border-bottom: 1px solid #c8c7cc;
          height: 88rpx;
          line-height: 88rpx;
        }
      }
    }
  }
  .city-nav {
    width: 30px;
    position: fixed;
    right: 0;
    top: 10%;
    font-size: 24rpx;
    text-align: center;
    line-height: 1.5;
  }
}
.item-btn {
  min-width: 26%;
  background: #fff;
  margin-bottom: 30rpx;
  margin-right: 4%;
  border-radius: 6rpx;
  line-height: 66rpx;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 30rpx;
}
.display-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-right: 0!important;
}
</style>
